import React from "react";
import {Redirect} from "react-router-dom";
import {NavBar, InputItem, TextareaItem, Button, WhiteSpace} from "antd-mobile";
import AvatarSelector from "../../component/avatar-selector/avatar-selector";
import {update} from "../../redux/user.reducer";
import {connect} from "react-redux";

@connect(
  state => state.user,
  {update}
)
class BossInfo extends React.Component {
  constructor () {
    super();
    this.state = {
      avatar: "",
      job: "",
      desc: "",
      salary: "",
      phone: ""
    };
    this.selectAvatar = this.selectAvatar.bind(this);
    this.handleUpdateClick = this.handleUpdateClick.bind(this);
  }

  selectAvatar (avatar) {
    this.setState({
      avatar
    });
  }

  handleChangeVal (name, value) {
    this.setState({
      [name]: value
    });
  }

  handleUpdateClick () {
    this.props.update(this.state);
  }

  render () {
    const path = this.props.history.location.pathname;
    const needRedirect = this.props.redirectTo && this.props.redirectTo !== path;
    return (
      <div>
        {needRedirect ? <Redirect to={this.props.redirectTo}/> : null}
        <NavBar>信息完善(Boss)</NavBar>
        <AvatarSelector selectAvatar={this.selectAvatar}/>
        <InputItem
          onChange={(v) => this.handleChangeVal("company", v)}>公司名称:</InputItem>
        <InputItem
          onChange={(v) => this.handleChangeVal("job", v)}>招聘职位:</InputItem>
        <TextareaItem title="职位简介:" rows={3} autoHeight
                      onChange={(v) => this.handleChangeVal("desc", v)}/>
        <InputItem
          onChange={(v) => this.handleChangeVal("salary", v)}>薪资范围:</InputItem>
        <InputItem type="phone"
                   onChange={(v) => this.handleChangeVal("phone", v)}>
          联系电话:</InputItem>
        <WhiteSpace/>
        <WhiteSpace/>
        <Button type="primary" onClick={this.handleUpdateClick}>保存</Button>
      </div>
    );
  }
}

export default BossInfo;